<template>
  <div class="replyList">
    <el-table :data="tableData"
              size="mini"
              ref="taskTable"
              @expand-change="rowClick">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="search-pagination" style="float: right">
            <pagination
              :small="paginationRecord.small"
              :currentPage="paginationRecord.currentPage"
              :count="countRecord"
              @turnPage="turnPageRecord"
              :totalPage="totalPageRecord"
            >
            </pagination>
          </div>
          <el-table
            style="width: 100%"
            :data="scope.row.children"
            size="mini"
          >
            <el-table-column
            :show-overflow-tooltip="true"
            v-for="(item, index) in taskOptions"
            :width="item.name === 'beginTime' || item.name === 'taskName' ? '210' : ''"
            :key="index"
            :prop="item.name"
            :label="item.displayname"
            >
            </el-table-column>
            <el-table-column  :label="$t('public.operate')" width="130">
              <template scope="scope2">
                <el-button @click="details(scope2)" type="text" size="small">{{$t('intelligentQualityCheck.intelDetails')}}</el-button>
                <el-button type="text" @click="listenVideo(scope2.row)" size="small" v-show="type==='通话质检'">{{$t('qualityCheck.ListenToTheRecording')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in options"
        :width="item.name === 'name' ? '210' : ''"
        :key="index"
        :prop="item.name"
        :show-overflow-tooltip="true"
        :label="item.displayname">
      </el-table-column>
      <el-table-column :label="$t('public.operate')"
        :show-overflow-tooltip="true"
      >
        <template scope="scope">
          <el-button type="text" size="small" @click.stop = "report(scope.row)">{{$t('public.export')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getCacheByKey} from '@/utils/m7Utils'
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'quality-check-result-task-table',
    data () {
      return {
        options: [
          {displayname: this.$t('qualityCheck.taskName'), name: 'name'},
          {displayname: this.$t('intelligentQualityCheck.intelTaskType'), name: 'type_show'},
          {displayname: this.$t('intelligentQualityCheck.rulesInvolving'), name: 'ruleName'},
          {displayname: this.$t('intelligentQualityCheck.intelDealAgents'), name: 'user'},
          {displayname: this.$t('intelligentQualityCheck.intelQuailtyCount'), name: 'count'},
          {displayname: this.$t('intelligentQualityCheck.intelFinishCount'), name: 'successCount'},
          {displayname: this.$t('intelligentQualityCheck.intelProgress'), name: 'status_show'}
        ],
        taskTableChildData: [],
        taskOptions: [],
        // 要展开的行，数值的元素是row的key值
        expands: [],
        type: '',
        paginationRecord: { // 分页参数
          small: false,
          currentPage: 1
        },
        countRecord: 0, // 总数
        row: {},
        totalPageRecord: 0 // 当前页
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      callOptions: {
        type: Array,
        default: function () {
          return []
        }
      },
      webChatOptions: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      report (val) { // 导出
        this.$emit('exportTaskResult', val)
      },
      details (scope2) { // 详情
        this.$emit('details', scope2.row, this.type)
      },
      listenVideo (row) { // 听取录音
        this.$emit('listenVideo', row)
      },
      turnPageRecord (pageVal) { // 分页
        this.paginationRecord.currentPage = pageVal
        if (this.type === 'webchat') {
          this.queryWebChatResult(this.row, pageVal)
        } else if (this.type === 'call') {
          this.queryCallResult(this.row, pageVal)
        }
      },
      rowClick (row, expandRows) { // 点击某一行
        console.log(expandRows)
        let checkFold = false // 判断是否展开
        for (let i = 0; i < expandRows.length; i++) {
          if (expandRows[i]._id === row._id) {
            checkFold = true
            break
          }
        }
        if (checkFold) {
          if (this.$refs.taskTable && this.$refs.taskTable.store.states) {
            this.$refs.taskTable.store.states.expandRows = []
            this.$refs.taskTable.store.states.expandRows.push(row)
            this.paginationRecord.currentPage = 1
          }
          if (row.type === 'webchat') {
            this.type = row.type
            this.taskOptions = this.webChatOptions
            this.queryWebChatResult(row, 1)
          } else if (row.type === 'call') {
            this.type = row.type
            this.taskOptions = this.callOptions
            this.queryCallResult(row, 1)
          }
        }
      },
      arrarRemove (arr, val) {
        let index = arr.indexOf(val)
        if (index > -1) {
          arr.splice(index, 1)
        }
      },
      queryWebChatResult (row, page) {
        let agents = this.$store.getters.agents || {}
        let data = {limt: 10, page: page, taskId: row._id}
        this.$store.dispatch('queryIntelligentQualityCheckResultAllWebList', data).then(res => {
          this.totalPageRecord = Math.ceil(res.count / 10) || 0
          this.countRecord = res.count
          res.data.map(item => {
            if (agents[item.gradeUser]) {
              item.gradeUser = agents[item.gradeUser].displayName // 通话座席
            } else {
              item.gradeUser = '--'
            }
            if (agents[item.user]) {
              item.user = agents[item.user].displayName // 质检人员
            } else {
              item.user = '--'
            }
            let toPeerName = ''
            if (getCacheByKey('mailQueues', 'Exten', item.toPeer) != null) { // 技能组
              toPeerName = getCacheByKey('mailQueues', 'Exten', item.toPeer).DisplayName
              item.toPeer = toPeerName
            } else {
              item.toPeer = '--'
            }
            if (item.beginTime == null) { // 会话领取时间
              item.beginTime = '--'
            }
            if (item.customerName === '') { // 定位客户
              if (item.sName !== '') {
                item.custName_show = item.sName
              } else {
                item.custName_show = '--'
              }
            } else {
              item.custName_show = item.customerName
            }
            if (!item.taskName) {
              item.taskName = '--'
            }
            if (!item.taskId || item.taskId === '') { // 判断是否是智能质检
              item.webChatRuleName = '--'
            } else {
              item.ruleResults.forEach(ruleItem => {
                item.webChatRuleName = ruleItem.name
              })
            }
          })
//          this.$set(row, 'children', res.data)
          row.children = res.data
          this.row = row
        })
      },
      queryCallResult (row, page) {
        let agents = this.$store.getters.agents || {}
        let data = {limt: 10, page: page, taskId: row._id}
        this.$store.dispatch('queryIntelligentQualityCheckResultAllList', data).then(res => {
          this.totalPageRecord = Math.ceil(res.count / 10) || 0
          this.countRecord = res.count
          res.data.map(item => {
            if (agents[item.agentId]) {
              item.callAgent = agents[item.agentId].displayName // 通话座席
            } else {
              item.callAgent = '--'
            }
            if (agents[item.gradeUser]) {
              item.gradeUser = agents[item.gradeUser].displayName // 质检人员
            } else {
              item.gradeUser = '--'
            }
            if (!item.toPeer) {
              item.toPeer = '--'
            }
            if (!item.taskName) {
              item.taskName = '--'
            }
            if (!item.taskId) { // 判断是否是智能质检
              item.ruleName = '--'
            } else {
              item.ruleResults.forEach(ruleItem => {
                item.ruleName = ruleItem.name
              })
            }
          })
//          this.$set(row, 'children', res.data)
          row.children = res.data
          this.row = row
        })
      }
    },
    components: {
      Pagination
    }
  }
</script>

<style scoped>

</style>
